<div id="wrapper">
    <div ng-include="'/app/modules/dashboard/sidebar.html'"></div>
    <div ng-include="'/app/modules/manage/search.html'"></div>
    <div ng-include="'/app/modules/manage/select-user.html'"></div>

    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <h4 class="my-2 mr-md-auto">System settings</h4>
                <!-- Topbar Search -->
                <!--
                <form class="d-none d-sm-inline-block form-inline ml-auto mr-md-3 my-2 my-md-0 mw-100 navbar-search text-right">
                    <button type="button" class="btn btn-primary" ng-click="newSerie ()">
                        <i class="fa fa-plus"></i> Add serie
                    </button>
                </form>
                -->
            </nav>
            <div class="container-fluid">
                <h2>Library settings</h2>
                <hr />
                <p>Here you can specify the folders to be used by the scanner to find and display your local manga collection. The changes won't take effect until the library is refreshed from the Dashboard</p>
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Path</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="folder in folders track by $index" class="item">
                            <td class="text-center header-small">
                                <i class="fa fa-folder"></i>
                            </td>
                            <td>{{ folder }}</td>
                            <td class="header-small">
                                <button class="btn btn-sm btn-danger" ng-click="removeFolder ($index)"><i class="fa fa-times"></i> Remove folder</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-right">
                    <button class="btn btn-success" ng-click="showFolderDialog ()"><i class="fa fa-plus"></i> Add folder</button>
                </div>
                <h2>Administrator users</h2>
                <hr />
                <p>These users will be able to manage the library settings and update the library from the dashboard</p>
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Username</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="userid in admins track by $index" class="item">
                        <td class="text-center header-small">
                            <i class="fa fa-user"></i>
                        </td>
                        <td>{{ userlist [userid] }}</td>
                        <td class="header-small">
                            <button class="btn btn-sm btn-danger" ng-click="removeUser ($index)" ng-hide="admins.length == 1 || userlist [userid] == ourUsername"><i class="fa fa-times"></i> Remove user</button>
                            <span ng-show="admins.length == 1 || userlist [userid] == ourUsername">No actions available</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="text-right">
                    <button class="btn btn-success" ng-click="showUserSelectDialog ()"><i class="fa fa-plus"></i> Add user</button>
                </div>
            </div>
        </div>
    </div>
</div>